<template>
  <view class="page custom-page">
    <custom-head gradient back title="每日动态"> </custom-head>
    <view class="class">
      <view class="class_item flex u-col-center u-p-35" v-for="item in newsList" :key="item.id">
        <u-image width="98rpx" height="98rpx" :src="item.main_pic" ></u-image>

        <view class="u-flex-1 u-flex-col u-m-l-32">
          <text class="class_name">{{ item.title }}</text>
          <text class="time">{{ item.desc }}</text>
          <text class="u-font-xs u-tips-color">{{ item.created_at }}</text>
        </view>

        <view class="right flex a-center">
          <u-button shape="circle" type="primary" size="mini" class="btn" @click="toEdit(item.id)"> 编辑</u-button>
        </view>

      </view>
    </view>
    <view class="bottom_btn_box">
      <u-button type="primary" shape="circle" @click="toPage('/pages/news/addition')">自定义动态</u-button>
    </view>
  </view>
</template>

<script>
import { getNews } from '../../api/modules/news'
import { toPage } from '@/utils'

import dayjs from 'dayjs'

export default {
  data() {
    return {
      newsList: [],
      static_uri: getApp().globalData.glb_list.config.static_uri, // 获取全局配置文件
    }
  },

  onShow() {
    this._getNews({page_no: 1, page_size: 10000})
  },

  methods: {
    toPage,
    _getNews(data) {
      getNews(data).then((res) => {
        const { code } = res || {};
        if (code === 200) {
          this.newsList = res.data.list.map(i => ({...i, created_at: dayjs(i.created_at).format('YYYY/MM/DD'), main_pic: `${this.static_uri}${i.main_pic}`})).filter(i => i.sid === this.glbId)
        }
      })
    },

    toEdit(id) {
      this.toPage('/pages/news/addition', { id })
    }
  }
}
</script>

<style scoped lang="scss">
.class {
  padding-bottom: 100rpx;

  .class_item {
    background-color: #fff;
    margin-bottom: 20rpx;

    .class_name {
      color: #040709;
      font-weight: bold;
      font-size: 32rpx;
    }

    .time {
      color: #606265;
      font-size: 24rpx;
    }

    .right {
      font-size: 22rpx;

      .number {
        margin-right: 12rpx;
      }
    }
  }
}

.btn {
  width: 150rpx;
  height: 50rpx;
  padding: 0 10rpx;
}
</style>
